<template>

  <div>
    <el-card shadow="never"
             body-style="padding: 0;">
      <!-- 这里放，更新日志-->
      <el-col v-bind="styleResponsive ? { lg: 6, md: 8 } : { span: 6 }">
        <div class="demo-monitor-title"
             style="display: flex">
          <div>更新功能</div>
        </div>
        <!--更新内容-->
        <el-scrollbar style="height: 326px;margin: 10px 0 20px"
                      wrapStyle="overflow-x: hidden;"
                      viewStyle="padding: 14px 10px;">
          <el-timeline :reverse="false"
                       class="ele-timeline ele-timeline-act">
            <el-timeline-item v-for="(item, index) in logList"
                              :key="index"
                              :timestamp="item.timestamp"
                              :type="item.type">
              <div class="flex-columns">
                <div class="font12 color000">版本信息：{{item.logVersion}}</div>
                <div class="log-card">
                  <div class="title">{{ item.logName }}</div>

                  <!--富文本内容-->
                  <div class="content"
                       v-html="item.logUpdate"></div>
                </div>
                <div v-if="item.releaseTime">更新时间：{{item.releaseTime}}</div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-scrollbar>
      </el-col>
    </el-card>
  </div>
</template>
<script>

import { logList } from './constant/constant'

export default {
  name: 'DashboardAnalysis',
  components: {

  },
  data () {
    return {
      logList
    }
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  }
};

</script>
<style lang="less">
/* 小标题 */
/* 销售额、访问量工具栏 */
.demo-monitor-tool {
  padding: 5px 20px;

  .demo-monitor-tabs {
    height: 51px;
  }

  :deep(.el-tabs__item) {
    height: 51px;
    line-height: 51px;
    font-size: 15px;
  }

  :deep(.el-tabs__nav-wrap:after) {
    display: none;
  }
}

/* 小标题 */
.demo-monitor-title {
  padding: 0 20px;
  margin: 15px 0 5px 0;
}

/* 排名 item */
.demo-monitor-rank-item {
  padding: 0 20px;
  line-height: 20px;
  margin-top: 18px;
}
/*  更新日志*/

.log-card {
  margin: 10px 0;
  flex: 1;
  /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
  /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
  box-shadow: 0 15px 30px #f6f6f6;
  border-radius: 10px;
  overflow: hidden;
  .title {
    width: 100%;
    color: #3094fe;
    background-color: #f3f3f3;
    font-size: 16px;
    font-weight: bold;
    padding: 15px 10px;
  }
  .content {
    width: auto !important;
    background-color: #fff;
    padding: 10px;
    color: #86919d;
  }
}
</style>